<template>
	<view>

		<view class="bg-white round-12  h-150  p-12">
			<swiper autoplay interval="2000" circular class="w-p-100 h-150">
				<swiper-item class=" h-150 w-p-100 round-12" v-for="(item,index) in bannerList" :key='index'>
					<image class="h-p-100 w-p-100 " :src='item.image'></image>
				</swiper-item>
				<!-- #ifdef MP-WEIXIN -->
				<swiper-item class="round-12 h-150"
					v-if="WEBCONFIG?.weixin_banner_status && WEBCONFIG?.weixin_banner_status == 1">
					<ad :unit-id="WEBCONFIG?.weixin_banner_ad_id" ad-theme="white"></ad>
				</swiper-item>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<swiper-item class="round-12 h-150"
					v-if="WEBCONFIG?.douyin_banner_status && WEBCONFIG?.douyin_banner_status == 1">
					<ad :unit-id="WEBCONFIG?.douyin_banner_ad_id" ad-theme="white"></ad>
				</swiper-item>
				<!-- #endif -->
			</swiper>
		</view>
		<viwe class="p-12 flex flex-y-center box-sizing" v-if='WEBCONFIG?.system_notice'>
			<view class="box round-30 w-p-100">
				<uv-notice-bar bgColor="#fff" color="#000" :text="WEBCONFIG?.system_notice"></uv-notice-bar>
			</view>
		</viwe>

		<view class="vw-100 h-10  " style="background-color: #ecf4f4;"></view>

		<view class="overflow-hidden py-20 px-12">
			<view class="flex overflow-x-scroll w-p-100" :class='getClass()'>
				<view v-for="(item,index) in categoryList" :key='index'>
					<view class=" px-12 p-6" :class="query.category_id==item.id?'line' : ''" @click="changeCate(item)">
						<text class="fs-15">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-x-space-between flex-wrap px-12">
			<view v-for="(item,index) in list" :key='index' class="py-6 box-sizing">
				<image class="w-170 h-180 round-12" :src="item.rendering" v-if="!item.ad" @click="onJump(item)"></image>

				<!-- #ifdef MP-WEIXIN -->
				<view v-if="item.ad&& WEBCONFIGweixin_banner_status && WEBCONFIGweixin_banner_status == 1">
					<ad :unit-id="WEBCONFIGweixin_banner_ad_id" ad-theme="white"></ad>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view v-if="item.ad&& WEBCONFIGdouyin_banner_status && WEBCONFIGdouyin_banner_status == 1">
					<ad :unit-id="WEBCONFIGdouyin_banner_ad_id" ad-theme="white"></ad>
				</view>
				<!-- #endif -->

			</view>
		</view>
		<view class="text-center py-20">
			<text class="fs-12 text-hint">{{tips}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { useStorage, $http, $page } from '@/utils/index'
	import { $interstitialAd } from '@/utils/ad'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const list = ref([])
	const bannerList = ref([])
	const categoryList = ref([])
	const tips = ref('')
	const status = ref(true)
	const name = ref('')
	const select = ref({
		type: 0,
		cate: 0
	})
	const query = ref({
		page: 1,
		limit: 10,
		category_id: 0
	})
	onLoad(() => {
		login()
		getBanner()
		getCategory()
		uni.$once('initConfig', () => {
			// #ifdef MP-WEIXIN
			if (WEBCONFIG.value?.weixin_interstitial_status == '1') {
				$interstitialAd.init(WEBCONFIG.value?.weixin_interstitial_ad_id)
				$interstitialAd.show()
			}
			// #endif
			// #ifdef MP-TOUTIAO
			if (WEBCONFIG.value?.douyin_interstitial_status == '1') {
				$interstitialAd.init(WEBCONFIG.value?.douyin_interstitial_ad_id)
				$interstitialAd.show()
			}
			// #endif
			uni.setNavigationBarTitle({
				title: WEBCONFIG.value.web_name
			})
		})
	})

	onReachBottom(() => {
		if (status.value) {
			query.value.page++
			tips.value = '加载中...'
			getList()
		}
	})


	const search = () => {
		$page.open('/pages/index/search?name=' + name.value)
	}
	
	const onJump = (e) => {
		if (select.value.cate == '2') {
			$page.open('/pages/avatar/custom?template_id=' + select.value.type + '&id=' + e.id)
		} else {
			$page.open('/pages/avatar/index?id=' + e.id + '&type=' + select.value.type)
		}
	}


	const getList = () => {
		$http.get('Avatar/getList', query.value).then(res => {
			if (res.data.data.length < query.value.limit) {
				tips.value = '没有更多了'
				status.value = false
			} else {
				tips.value = ''
			}
			res.data.data.map(e => {
				list.value.push(e)
			})
			list.value.push({
				ad: true
			})
		})
	}

	const changeCate = (e) => {
		query.value.category_id = e.id
		select.value.cate = e.cate
		select.value.type = e.type
		list.value = []
		status.value = true
		getList()
	}

	const getCategory = () => {
		$http.get('Category/getList').then(res => {
			categoryList.value = res.data
			query.value.category_id = res.data[0].id
			select.value.type = res.data[0].type
			select.value.cate = res.data[0].cate
			getList()
		})
	}
	const getBanner = () => {
		$http.get('Banner/getList').then(res => {
			bannerList.value = res.data
		})
	}
	const getClass = () => {
		if (categoryList.value.length <= 6) {
			return 'flex-x-space-between'
		}
		return ''
	}
	const login = () => {
		const { setUserInfo } = useUserStore()
		let provider = 'weixin'
		let pid = useStorage().get('PID')

		let data = {
			pid: pid || 0,
			type: 'weixin'
		}
		// #ifdef MP-TOUTIAO
		provider = 'douyin'
		data.type = 'douyin'
		// #endif
		uni.login({
			provider: provider,
			success(res) {
				data.code = res.code
				$http.post('Login/login', data).then(res => {
					setUserInfo(res.data)
				})
			}
		})
	}




	//分享
	onShareTimeline(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			query: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})

	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			path: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})
</script>

<style scoped>
	.line {
		background: linear-gradient(90deg, #3D5CFF 100%, #3D5CFF 100%);
		background-size: 40% 6rpx;
		background-repeat: no-repeat;
		background-position: bottom;
	}

	.box {
		box-shadow: 0rpx 0rpx 24rpx 0rpx #EEEEEE;
	}
</style>